<template>
  <div class="menu-wrapper">
    <div class="mainmenu">
      <div v-for="menu in menus" :key="menu.id" >
        <div class="mainmenu-item" @click="handleSelect(menu.id)" :class="{ active: menu.id === optionType }">
          <SvgIcon class="x16" :name="menu.icon"></SvgIcon>
          <span>{{ menu.name }}</span>
        </div>
        <el-menu v-if="menu.children?.length"
          class="el-menu-vertical"
          ref="menuRef"
          :unique-opened="true"
        >
          <SubMenu :menuList="menu.children" @select="handleSelect" />
        </el-menu>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { type MenuItem } from '@/management/utils/types/formsTypes'
import SvgIcon from '@common/SvgIcon/index.vue'
import SubMenu from './SubMenu.vue'
const store = useStore()
withDefaults(
  defineProps<{
    menus: Array<MenuItem>
  }>(),
  {
    menus: () => []
  }
)

const emit = defineEmits(['select'])
const handleSelect = (id: string) => {
  emit('select', id)
}

const optionType = computed(() => {
  return store.state.dataform.optionType
})
</script>

<style lang="scss" scoped>
.menu-wrapper {
  width: 200px;
  min-height: 400px;
  height: 100%;
  position: absolute;
  top: 1px;
  bottom: 0px;
  z-index: 999;
  overflow-x: auto;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
  border-right: 1px solid #f6f7f9;

  .mainmenu {
    padding: 10px 0 0 10px;
  }
  .mainmenu-item {
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;

    &:hover,
    &.active {
      background: #DFF0FF;
    }
    &.hasChild:hover,
    &.hasChild.active {
      background: #fff;
    }
  }
  .mainmenu-item + .mainmenu-item {
    margin-top: 10px;
  }
}

.el-menu-vertical {
  border: none;
  padding: 5px;
  
  :deep(.el-menu-item.is-active::before) {
    display: none;
  }
  :deep(.el-sub-menu .el-menu-item) {
    --el-menu-sub-item-height: 36px;
  }
  :deep(.el-menu-item) {
    --el-menu-item-height: 36px;
  }
  :deep(.el-sub-menu__title) {
    --el-menu-item-height: 36px;
  }
}
</style>
